/*
 * @Author: yxfan
 * @Date: 2022-11-26 18:09:34
 * @LastEditTime: 2022-12-08 11:00:32
 * @FilePath: /umi-demo/src/pages/demo/Transfer/index.js
 * @Description:
 */
import { Transfer, Tree } from 'antd';
import React, { useState } from 'react';
import _ from 'lodash';
// Customize Table Transfer
const isChecked = (selectedKeys, eventKey) => selectedKeys.includes(eventKey);
const generateTree = (treeNodes = [], checkedKeys = []) =>
  treeNodes.map(({ children, ...props }) => ({
    ...props,
    disabled: checkedKeys.includes(props.key),
    children: generateTree(children, checkedKeys),
  }));
const TreeTransfer = ({ dataSource, targetKeys, ...restProps }) => {
  const transferDataSource = [];
  function flatten(list = []) {
    list.forEach((item) => {
      transferDataSource.push(item);
      flatten(item.children);
    });
  }
  flatten(dataSource);
  console.log('d:', transferDataSource);
  return (
    <Transfer
      {...restProps}
      targetKeys={targetKeys}
      dataSource={transferDataSource}
      className="tree-transfer"
      render={(item) => item.title}
      showSelectAll={true}
    >
      {({ direction, onItemSelect, onItemSelectAll, selectedKeys }) => {
        if (direction === 'left') {
          const checkedKeys = [...selectedKeys, ...targetKeys];

          return (
            <Tree
              blockNode
              checkable
              //   checkStrictly
              defaultExpandAll
              checkedKeys={checkedKeys}
              treeData={generateTree(dataSource, targetKeys)}
              onCheck={(keys, info) => {
                // console.log(checkedKeys, keys);
                let newKeys = [];

                if (checkedKeys.length > keys.length) {
                  newKeys = _.difference(checkedKeys, keys);
                } else {
                  newKeys = _.difference(keys, checkedKeys);
                }
                console.log(checkedKeys, keys, newKeys);

                // debugger;
                // if (keys[0] = '0-1-0') {
                //     return onItemSelectAll(keys, false);
                // }
                onItemSelectAll(newKeys, info.checked);
              }}
              onSelect={(_, { node: { key } }) => {
                onItemSelect(key, !isChecked(checkedKeys, key));
              }}
            />
          );
        }
      }}
    </Transfer>
  );
};
const treeData = [
  {
    key: '0-0',
    title: '0-0',
  },
  {
    key: '0-1',
    title: '0-1',
    children: [
      {
        key: '0-1-0',
        title: '0-1-0',
      },
      {
        key: '0-1-1',
        title: '0-1-1',
      },
    ],
  },
  {
    key: '0-2',
    title: '0-3',
  },
];
const App = () => {
  const [targetKeys, setTargetKeys] = useState([]);
  const onChange = (keys) => {
    setTargetKeys(keys);
  };
  return (
    <div style={{ textAlign: 'left' }}>
      <TreeTransfer
        dataSource={treeData}
        targetKeys={targetKeys}
        onChange={onChange}
      />
      ;
    </div>
  );
};
export default App;
